<template>
  <div>
    <div class="tab">
      <div class="tab-nav">
        <h3>每日特价</h3>
        <ul>
          <li>
            <a         
              href="javascript:;"
              v-for="(item, index) in navArr"
              :key="index"
              :class="{active : active===index}"
              @mouseenter="active=index"
              >{{ item.name }}</a
            >
          </li>
        </ul>
      </div>
      <div class="tab-content">
        <div class="item active" v-for="(item,index) in navArr" :key="index" v-show="active===index"><img :src=item.src alt="" /></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      navArr: [
        {
          name: "精选",
          src : "http://127.0.0.1:5500/%E7%AC%AC6%E9%A2%98-tab%E6%A0%8F%E5%88%87%E6%8D%A2/images/tab00.png"
        },
        {
          name : '美食',
          src : "http://127.0.0.1:5500/%E7%AC%AC6%E9%A2%98-tab%E6%A0%8F%E5%88%87%E6%8D%A2/images/tab01.png"
        },
        {
          name : '百货',
          src : "http://127.0.0.1:5500/%E7%AC%AC6%E9%A2%98-tab%E6%A0%8F%E5%88%87%E6%8D%A2/images/tab02.png"
        },
        {
          name : '个护',
          src : "http://127.0.0.1:5500/%E7%AC%AC6%E9%A2%98-tab%E6%A0%8F%E5%88%87%E6%8D%A2/images/tab03.png"
        },
        {
          name : '预告',
          src : "http://127.0.0.1:5500/%E7%AC%AC6%E9%A2%98-tab%E6%A0%8F%E5%88%87%E6%8D%A2/images/tab04.png"
        }
      ],
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.tab {
  width: 590px;
  height: 340px;
  margin: 20px;
  border: 1px solid #e4e4e4;
}

.tab-nav {
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}

.tab-nav h3 {
  font-size: 24px;
  font-weight: normal;
  margin-left: 20px;
}

.tab-nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
}

.tab-nav ul li {
  margin: 0 20px;
  font-size: 14px;
}

.tab-nav ul li a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  color: #333;
}

.tab-nav ul li a.active {
  border-color: #e1251b;
  color: #e1251b;
}

.tab-content {
  padding: 0 16px;
}

.tab-content .item {
  display: none;
}

.tab-content .item.active {
  display: block;
}

.item:nth-child(2) {
}
</style>